【HTML】canvasタグ - キャンバス

HTMLのcanvasタグについて解説します。

検証環境

HTML

macOS

14.1

canvasタグ

canvasタグは“キャンバス”を意味するタグです。

キャンバスはグラフィックやアニメーションを描画することが可能です。

基本構文

<canvas>代替テキスト</canvas>

サンプル

sample.html

___ih_hl_start
<canvas id="board" width="300" height="300">
    青色の正方形
</canvas>
___ih_hl_end

<script type="text/javascript">
    var board = document.getElementById("board");
    const context = board.getContext("2d");
    context.fillStyle = "blue";
    context.fillRect(30, 30, 80, 80);
</script>

プレビュー